/* eslint-disable no-undef */
import './index.css';
import a from'./images/cw1.png';
import b from'./images/cw2.png';
import c from'./images/cw3.png';
import d from'./images/cw4.png';
let arr=[a,b,c,d];
let mask = document.querySelector('.mask');
let ul = document.querySelector('ul');
// eslint-disable-next-line no-undef
let downX = 0,downY =0, last = 0;
function enter() {
    downX = event.clientX - mask.offsetLeft;
    downY = event.clientY - mask.offsetTop;
    mask.addEventListener('mousemove', move);
}
function move() {
    if (+mask.style.left.substring(0, mask.style.left.indexOf('px')) < 0) {
        mask.style.left = 0;
        return;
    }
    if (+mask.style.top.substring(0, mask.style.top.indexOf('px')) < 0) {
        mask.style.top = 0;
        return;
    }
    if (+mask.style.left.substring(0, mask.style.left.indexOf('px')) > 100) {
        mask.style.left = 100 + 'px';
        return;
    }
    if (+mask.style.top.substring(0, mask.style.top.indexOf('px')) > 100) {
        mask.style.top = 100 + 'px';
        return;
    }
    mask.style.left = event.clientX - downX + 'px';
    mask.style.top = event.clientY - downY + 'px';
    //console.log(ul.previousElementSibling.children[0]);
    ul.previousElementSibling.children[0].style.transform = `translate(-${
        (event.clientX - downX) * 2
    }px,
    -${(event.clientY - downY) * 2}px)`;
}
mask.addEventListener('mouseenter', enter);
mask.addEventListener('mouseleave', () => {
    mask.removeEventListener('mousemove', move);
});
ul.addEventListener('click', () => {
    ul.children[last].children[0].classList.remove('active');
    let i = Number(event.target.dataset.index);
    ul.children[i].children[0].classList.add('active');
    last = i;
    mask.nextElementSibling.src = arr[i];
    ul.previousElementSibling.children[0].src =arr[i];
});
